<template>
    <el-form :inline="true" size="small">
          <el-form-item>
              <el-button type="primary" icon="Plus" @click="addDialog=true">添加</el-button>
          </el-form-item>
      </el-form>
      <el-table v-loading="load" :data="tableData" row-key="id" style="width: 100%" size="small">
          <el-table-column prop="menuName" label="菜单名称"/>
          <el-table-column prop="menuDesc" label="菜单描述"/>
          <el-table-column prop="icon" label="图标">
              <template #default="scope">
                  <el-icon>
                      <component :is="scope.row.icon"></component>
                  </el-icon>
              </template>
          </el-table-column>
          <el-table-column prop="sortOrder" label="排序"/>
          <el-table-column prop="permissionCode" label="权限修饰符"/>
          <el-table-column prop="url" label="菜单url"/>
          <el-table-column label="操作" >
              <template #default="scope">
                  <div style="display: flex; gap: 20px">
                      <el-link type="primary" @click="updata(scope.row)">修改</el-link>
                      <el-link type="primary" @click="del(scope.row)">删除</el-link>
                  </div>
              </template>
          </el-table-column>
      </el-table>
      <updateMenuview v-if="updateFormVisible" v-model:updateFormVisible="updateFormVisible" :tableData="tableData" :rowData="rowData" @loadTableData="loadTableData" />
    <!--添加界面-->
    <MenuAddView v-if="addDialog" v-model:addDialog="addDialog" @loadData="loadTableData" :tableData="tableData" />
  </template>
  
  <script setup>
      import {ref, reactive} from "vue";
      import axios from '../../axios/index.js'

      import MenuAddView from './MenuAddView.vue'

      import updateMenuview from "./updateMenuview.vue";
      import {ElMessage,ElMessageBox} from "element-plus";

      let tableData = reactive([])
      let load = ref(true)
      let addDialog = ref(false)
      let updateFormVisible = ref(false)

      let rowData =reactive({
        id:'',
        pid:'',
        menuName: '',
        menuDesc: '',
        icon: '',
        sortOrder: '',
        url: '',
        permissionCode: ''
    })

      function updata(row) {
         rowData.id = row.id,
        rowData.pid = row.pid,
         rowData.menuName = row.menuName,
         rowData.menuDesc = row.menuDesc,
         rowData.sortOrder = row.sortOrder,
         rowData.icon = row.icon,
         rowData.url = row.url
         rowData.permissionCode = row.permissionCode
        updateFormVisible.value = true
      }


      //获取表格数据
      function loadTableData() {
          load.value = true
          axios.get("/menu",{params:{
                  pid: "0",
                  status: 1
                  
              }}).then(resp=>{
              tableData = resp.data;
              load.value = false
      })
  }

  function del(row) {
    ElMessageBox.confirm(
      '是否删除该菜单',
      '警告',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }
    )
     .then(() => {
        axios.put('/menu', { id: row.id, status: 0 }, { headers: { 'content-type': 'application/json' } })
         .then((resp) => {
            ElMessage({
              message: "删除成功",
              type: 'success',
              duration: 1500
            });
            loadTableData();
          });
      })
     .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
      });
  }
  
     loadTableData();
  </script>
  
  <style scoped>
      .el-form .el-form-item:last-child{
              margin-right: auto;
          }
  </style>